<template>
	<view class="">
		<u-sticky offset-top="-2" v-if="searchShow">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
		</u-sticky>
		<view class="header-bg"></view>
		<view class="content">
			<view class="header">
				<view class="header-top">
					鼎辉汽修
				</view>
				<view class="header-bottom">
					<u-icon name="map" color="rgba(196, 196, 196, 1)" label="阿斯加德市无人区兴南港南街路138号"></u-icon>
					<view class="notice">
						<u-notice-bar bgColor="rgba(71, 71, 237, 0.08)" color="rgba(71, 71, 237, 1)" :text="text1"
							direction="column" mode="closable" speed="250" url="/pages/componentsB/tag/tag">
						</u-notice-bar>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="info-header">
					卡力特 品牌授权
				</view>
				<view class="info-content">
					<u-tabs :list="tabList" @click="tabClick" inactiveStyle="rgba(123, 123, 171, 1)" :activeStyle="{
					    color: '#000',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" lineColor="rgba(71, 71, 237, 1)"></u-tabs>
					<view class="goods">
						<goods :info="{}" v-for="(item,index) in 15"></goods>
					</view>
				</view>
			</view>
		</view>
		<view class="cart">
			<view class="cartt">
				<view class="cart-left">
					<image src="/static/uview/common/logo.png" style="width: 100rpx;height: 100rpx;" mode="widthFix">
					</image>
					<view class="m-l-10">
						<u-text size="16" mode="price" text="17000" :color="$u.color.priceColor">
						</u-text>
					</view>
				</view>
				<view class="cart-right" @click="popupShow = true">
					去结算
				</view>
			</view>
		</view>
		<u-popup :show="popupShow" :round="10" @close="close" @open="open">
			<view class="popup">
				<view class="popup-header">
					<view class="">
						共
						<span style="font-size: 30rpx;margin: 0 10rpx;font-weight: bold;">三</span>
						件商品
					</view>
					<view class="">
						<u-icon name="trash" color="#fff" labelColor="#fff" size="24" label="清空" labelSize="16"></u-icon>
					</view>
				</view>
				<view class="popup-content">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
						@scrolltolower="lower" @scroll="scroll">
						<goods :info="{}" :isSelect="true" v-for="(item,index) in 5"></goods>
					</scroll-view>
				</view>
				<view class="cart">
					<view class="cartt">
						<view class="cart-left">
							<image src="/static/uview/common/logo.png" style="width: 100rpx;height: 100rpx;"
								mode="widthFix">
							</image>
							<view class="m-l-10">
								<u-text size="16" mode="price" text="17000" :color="$u.color.priceColor">
								</u-text>
							</view>
						</view>
						<view class="cart-right" @click="popupShow = true">
							去结算
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchShow:false,
				keyword: '遥看瀑布挂前川',
				popupShow: false,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				text1: [
					'asdasd',
					'aaaaaaaf'
				],
				tabList: [{
					name: '全部商品',
				}, {
					name: '发动机油',
				}, {
					name: '润滑油'
				}, {
					name: '齿轮油'
				}],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			}
		},
		methods: {
			tabClick(e) {
				console.log(e)
			},
			btn() {
				uni.navigateTo({
					url: '/pages/order/affirm'
				})
			},
			close() {
				this.popupShow = false
			},
			open() {
				this.popupShow = true
			},
			upper: function(e) {
				console.log(e);
			},
			lower: function(e) {
				console.log(e);
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				});
			},
			onPageScroll(e) {
				if (e.scrollTop >= 350) {
					console.log(e.scrollTop)
					this.searchShow = true
				} else {
					this.searchShow = false
				}
			},
		}
	}
</script>

<style lang="scss">
	.header-bg {
		width: 100%;
		height: 400rpx;
		background: url('https://cdn.uviewui.com/uview/album/1.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.content {
		margin-top: -98rpx;
		z-index: 9;

		.header {
			border-radius: $radius;
			background-color: #fff;
			box-shadow: $shadow;
			margin: 30rpx;

			&-top {
				background-color: rgba(50, 50, 223, 1);
				padding: 15rpx;
				font-size: 30rpx;
				color: #fff;
				border-top-left-radius: $radius;
				border-top-right-radius: $radius;
			}

			&-bottom {
				padding: 15rpx;
			}
		}

		.notice {
			margin-top: 15rpx;
		}

		.info {
			&-header {
				background-color: rgba(229, 229, 229, 1);
				padding: 15rpx;
				margin: 0 30rpx;
				border-top-left-radius: $radius;
				border-top-right-radius: $radius;
				font-size: 30rpx;
			}

			&-content {
				border-top-left-radius: $radius;
				border-top-right-radius: $radius;
				padding: 30rpx;
				background: #fff;
				min-height: 700rpx;
			}
		}

		.goods {
			&-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 30rpx 0;

				&-left {
					display: flex;
					flex-direction: row;
				}

				&-img {
					width: 150rpx;
					height: 150rpx;
					background-color: #fff;
					border-radius: $radius;
					box-shadow: $shadow;
				}

				&-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 15rpx;
					font-size: 30rpx;
				}

				&-name {
					color: #000;
					font-weight: bold;
				}

				&-attr {
					display: flex;
					flex-direction: row;
					font-size: 24rpx;
					color: $u-light-color;
				}

				&-right {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}
	}

	.btn {
		border-radius: 50rpx;
		background: rgba(13, 13, 212, 1);
		padding: 10rpx 15rpx;
		color: #fff;
		box-shadow: 7rpx 10rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.cart {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100%;

		.cartt {
			width: 90%;
			height: 100rpx;
			background-color: #fff;
			border-radius: 50rpx;
			margin: auto;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			box-shadow: 7rpx 10rpx 30rpx rgba(0, 0, 0, 0.2);
		}

		&-left {
			width: 70%;
			display: flex;
			align-items: center;
			padding: 10rpx;
		}

		&-right {
			width: 30%;
			background-color: rgba(71, 71, 237, 1);
			color: #fff;
			height: 100%;
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	.popup {
		min-height: 600rpx;
		
		margin-bottom: 150rpx;

		&-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			background-color: rgba(71, 71, 237, 1);
			padding: 30rpx 30rpx 60rpx 30rpx;
			color: #fff;
			border-top-left-radius: $radius;
			border-top-right-radius: $radius;
		}
		
		&-content {
			background-color: #fff;
			border-top-left-radius: $radius;
			border-top-right-radius: $radius;
			margin-top: -30rpx;
			padding: 0 30rpx;
		}
	}

	// 上下滑动
	.scroll-Y {
		height: 800rpx;

		.scroll-view-item {
			height: 500rpx;
			width: 100%;
			color: #000;
		}
	}
</style>
